<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度ECHarts</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico">
    <link href="/css/layui.css" rel="stylesheet">
    <link href="/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="/css/animate.css" rel="stylesheet">
    <link href="/css/style.css?v=4.1.0" rel="stylesheet">
    <link rel="stylesheet" href="/js/layui-v2.6.6/layui/css/layui.css">

</head>
<style>
    .red{font-weight: bold;color: #FF5722}
    #info{
        background: #fff;
        margin-bottom: 20px;
        padding-bottom: 20px;
    }
    .create{
        border: 1px solid #ccc;
        border-radius: 5px;
        overflow: hidden;
        padding: 10px;
        box-sizing: border-box;
    }
    .create .game{
        width: 60px;
        height: 60px;
        float: left;
        margin-right: 15px;
    }

    .create .game img{
        width: 100%;
        vertical-align: middle;
    }

    .create .createDesc{
        float: left;
        padding-top: 20px;
    }

    .create .createDesc p{
        margin-bottom: 0;
    }


    @media (min-width: 768px) {
        .container {
            width:800px;
        }
    }

    @media (min-width: 900px) {
        .container {
            width:950px;
        }
    }

    @media (min-width: 1200px){
        .container {
            width: 98%;
        }
    }

</style>
<body class="gray-bg">

<div class="row  border-bottom white-bg dashboard-header">
    <div class="col-sm-12">
        <p>欢迎 <span th:text="${name}" style="font-size: 22px"></span>
        </p>
    </div>
</div>

<div class="wrapper wrapper-content animated fadeInRight container">
    <div class="row" id="info">
        <!---->
    </div>

    <div class="row">
        <div class="col-sm-12" style="padding: 0">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>正在进行的竞赛</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                    </div>
                </div>

                <table id="templet"></table>
            </div>
        </div>
    </div>

</div>
<!-- 全局js -->
<script src="/js/jquery.min.js?v=2.1.4"></script>
<script src="/js/bootstrap.min.js?v=3.3.6"></script>
<script src="/js/layui/layui.js?v=3.3.6"></script>

<!-- 自定义js -->
<script src="/js/content.js?v=1.0.0"></script>
<!--<script type="text/javascript" src="/js/contabs.js"></script>-->
<script>


    var roleNames =$("#roleNames").text();
    if(roleNames.indexOf("超级用户角色") > -1){
        $("#t1").show();
        $("#t2").hide();
        $("#t3").hide();
    }else if(roleNames.indexOf("考核站点") > -1){
        $("#t1").hide();
        $("#t2").show();
        $("#t3").hide();
    }else{
        $("#t1").hide();
        $("#t2").hide();
        $("#t3").show();
    }

    /**
     * value 跳转的url地址
     *首页跳转方法
     */
    function skipHtml(value) {
        let baseUrl = window.location.origin
        const menu = window.parent.$('.J_menuItem');//父页面的方法
        for (let i = 0; i < menu.length; i++) {
            if (menu[i].href === `${baseUrl}${value}`) {
                menu[i].click()
            }
        }
    }

    $(function () {
        $.ajax({
            url:'/earning',
            type:'POST',
            success:function (r) {
                console.log("rrr = " , r);
                if (r.code == 0){
                    var info = `<p class="col-sm-12" style="line-height: 40px;font-size: 16px">快捷操作</p>
                        <div class="col-sm-3" >
                                <span style="cursor: pointer;" onclick="skipHtml('/jzweb/examinationBatch?type=3')">
                                    <div class="create">
                                       <div class="game">
                                            <img src="./img/competition.png" alt="">
                                       </div>
                                       <div class="createDesc">
                                             <p>创建竞赛</p>
                                             <p>快速创建并发布竞赛</p>
                                       </div>
                                   </span></div>
                               </div>
                               <div class="col-sm-3"> <span style="cursor: pointer;" onclick="skipHtml('/jzweb/itemBank')">
                                   <div class="create">
                                       <div class="game">
                                            <img src="./img/test.png" alt="">
                                       </div>
                                       <div class="createDesc">
                                             <p>试题导入</p>
                                             <p>快速创建并发布竞赛</p>
                                       </div>
                                   </span></div>
                               </div>
                               <div class="col-sm-3"><span style="cursor: pointer;"  onclick="skipHtml('/jzweb/stuSignUpCom?types=3')">
                                   <div class="create">
                                       <div class="game">
                                            <img src="./img/player.png" alt="">
                                       </div>
                                       <div class="createDesc">
                                             <p>选手管理</p>
                                             <p>选手信息统一管理</p>
                                       </div>
                                   </span></div>
                               </div>`;
                    $('#info').html(info);
                }
            }
        })


        layui.use('table', function(){
            var table = layui.table;

            //第一个实例
            table.render({
                elem: '#templet'
                ,url: '/jzApi/examinations/selExaminationComAll' //数据接口
                ,cols: [[ //表头
                    {field: 'name', title: '竞赛名称'}
                    ,{field: 'startTime', title: '竞赛时间',templet:function (d){
                            if( d ){
                                return d.startTime +' ~ '+ d.endTime;
                            }
                        }
                    }
                    ,{field: 'type', title: '竞赛方式', templet:function (d){
                            if(d){
                                return '<span>'+ d.type +'</span>'
                            }
                        }
                    }
                    ,{field: '', title: '竞赛总人数'}
                ]]
            });

        });

    })

</script>
</body>

</html>
